<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML>
<html>
<head>
    <base href="${ctx }/">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="plugin/bootstrap-table/dist/bootstrap-table.css">
    <!-- <link rel="stylesheet" href="css/zoom.css" media="all" />  -->
    <link rel="stylesheet" href="alert/alert.css">
     <style type="text/css">
        a{
        color: #73879C;
        }
        #adds{
            margin-left: 26px;
        }
        #adds>table>tbody>tr>td{
            padding: 10px;
        }
    </style>
</head>
<body>

        <div>
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="javascript:void(0)">Fare Estimation Settings(报价系统)</a>
                </li>
                <li class="active">
                    <a href="view/priceRules/price_the_rules.jsp">Fare Settings(价格设置)</a>
                </li>
            </ul>
        </div>
              <div class="form-group">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="queryBtn" onclick="addOrUpdate(1)" class="btn btn-primary" >Add(添加)
                </button>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="queryBtn" onclick="addOrUpdate(2)" class="btn btn-primary">Update(修改)
                </button>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="queryBtn" onclick="del()" class="btn btn-primary">Delete(删除)
                </button>
                </div>	
        <br>
        <p id="onLineNum" style='text-align: center;color: red;'></p>
    <table id="demo-table"></table>
   
</body>

<!-- 加载需要的js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/jquery-bootstrap-pagination.js"></script>
<script src="plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src='alert/alert.js'></script>
<!--时间  -->
<script src="js/bootstrap-datetimepicker.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/common.js"></script>
<script src="plugin/layer/layer.js"></script>
<script type="text/javascript" charset="utf-8">

    $('.form_date').datetimepicker({
        minView: "month", //选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        format: 'dd/mm/yyyy',
        todayBtn: 1,
        autoclose: 1,
    });

    $(function () {
        initPath("${ctx }");
        initTable('demo-table', queryParams, columns, "carCaculation/getList");
        
    });
    
    

    var columns = [{field: '', title: 'Choose', checkbox: true},
    	{
        field: 'id',
        title: 'Operation',
        align: 'center',
        valign: 'middle',
        formatter: function (value, row, index) {
            var str = '';
            if(row.status==1){
                str += '<a  style="margin-left:5px;color: #03A9F4;" onclick="changeStatus('+row.id+',2,'+row.carType+')">禁用</a>';
            }else{
                str += '<a  style="margin-left:5px;color: #03A9F4;" onclick="changeStatus('+row.id+',1,'+row.carType+')">启用</a>';
            }
            return str;
        }
    },{
            field: 'ruleName',
            title: 'Rule name',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'carType',
            title: 'Service category',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
            	var str="";
            	if(value==1){
            		str="fab ONE";
            	}else if(value==2){
            		str="fab";
            	}else{
            		str="fab PRO";
            	}
                return str;
            }
        },
        {
            field: 'startPrice',
            title: 'Base Fare',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'fabCommission',
            title: 'fab Commission',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'timePrice',
            title: 'Per Minute',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'mileagePrice',
            title: 'Mileage Fee',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'cancelationFee',
            title: 'Cancelation Fee',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'bookingFee',
            title: 'Booking Fee',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'trafficJamPrice',
            title: 'Tarrif (CT) ',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'minimumFare',
            title: 'Minimum Fare',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'extraMoney',
            title: 'Concierge Fare',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'status',
            title: 'Status',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                return value==1?"Enabled":"Disabled";
            }
        },
        {
            field: 'remark',
            title: 'Notes',
            align: 'center',
            valign: 'middle'
        }
        
    ];
    
function changeStatus(id,status,carType){
	var data={"id":id,"status":status,"carType":carType};
	 $.ajax({
         type: "post",
         url: "carCaculation/changeStatus",
         data: JSON.stringify(data),
         contentType:"application/json;charset=UTF-8", 
         dataType:"json",
         success: function(data){    
       	  if(data.code==200){	
       		doQuery1('demo-table',queryParams1())
	          }else{
	         layer.msg(data.msg); 
	         }
        }
     }); 
}

function addOrUpdate(type){
	
	var ruleName="";var carType="";var mileagePrice="";var timePrice="";var startPrice="";var remark="";var minimumFare="";var id="";var bookingFee="";
	var status="";var cancelationFee="";var fabCommission="";var trafficJamPrice="";var extraMoney="";
	if(type==2){
		var row=$('#demo-table').bootstrapTable("getSelections");
		if(row.length==0){
			layer.msg("Please select a record and make changes.");
			return;
		}
		if(row.length>1){
			layer.msg("Please select only one record and make changes.");
			return;
		}
		if(row.length==1){
			ruleName=row[0].ruleName==null?"":row[0].ruleName;
			carType=row[0].carType==null?"":row[0].carType;
			mileagePrice = row[0].mileagePrice==null?"":row[0].mileagePrice;
			timePrice=row[0].timePrice==null?"":row[0].timePrice;
			startPrice=row[0].startPrice==null?"":row[0].startPrice;
			remark=row[0].remark==null?"":row[0].remark;
			minimumFare=row[0].minimumFare==null?"":row[0].minimumFare;
			id=row[0].id==null?"":row[0].id;
			bookingFee=row[0].bookingFee==null?"":row[0].bookingFee;
			status=row[0].status==null?"":row[0].status;
			cancelationFee=row[0].cancelationFee==null?"":row[0].cancelationFee;
			fabCommission=row[0].fabCommission==null?"":row[0].fabCommission;
			trafficJamPrice=row[0].trafficJamPrice==null?"":row[0].trafficJamPrice;
			extraMoney=row[0].extraMoney==null?"":row[0].extraMoney;
		}
	}
			layer.open({
	 			  type: 1,
	 			  title: "Toll information",
	 			  skin: 'layui-layer-rim', //加上边框
	 			  area: ['520px', '730px'], //宽高
	 			  content: ' <form id="adds"><table>'+
	 			  '  <tr class="padtr"><td class="pad">Rule name:</td> '+
	 		       '<td><input type="text" class="form-control" name="ruleName" id="ruleName"    value="'+ruleName+'"></td></tr>'+
	 			  '  <tr class="padtr"><td class="pad">Service category:</td> '+
	        '<td><select id="carType"  class="form-control" name="carType"><option value="1">fab ONE</option><option value="2">fab</option><option value="3">fab PRO</option><option value="4">concierge</option></select><input type="hidden" name="id"value="'+id+'" ></td></tr>'+
        
        
	       '  <tr class="padtr"><td class="pad">Base Fare:</td> '+
        '<td><input type="number" class="form-control" id="startPrice"  name="startPrice" oninput="reg(\'startPrice\')"   value="'+startPrice+'"></td></tr>'+
	         '  <tr class="padtr"><td class="pad">Per Minute:</td> '+
        '<td><input type="number" class="form-control"  id="timePrice" name="timePrice"  oninput="reg(\'timePrice\')"  value="'+timePrice+'"></td></tr>'
        +
         '  <tr class="padtr"><td class="pad">Mileage Fare:</td> '+
	        '<td><input type="number" class="form-control" name="mileagePrice" oninput="reg(\'mileagePrice\')"" id="mileagePrice"    value="'+mileagePrice+'"></td></tr>'+
	        
	        '  <tr class="padtr"><td class="pad">Tarrif (CT):</td> '+
	        '<td><input type="number" class="form-control" name="trafficJamPrice" oninput="reg(\'trafficJamPrice\')"" id="trafficJamPrice"    value="'+trafficJamPrice+'"></td></tr>'+
	        
	        
	       '  <tr class="padtr"><td class="pad">Booking Fee:</td> '+
        '<td><input type="number" class="form-control" name="bookingFee"  oninput="reg(\'bookingFee\')" id="bookingFee"    value="'+bookingFee+'"></td></tr>'+
        '  <tr class="padtr"><td class="pad">Cancelation Fee:</td> '+
        '<td><input type="number" class="form-control" name="cancelationFee"  oninput="reg(\'cancelationFee\')" id="cancelationFee"   value="'+cancelationFee+'"></td></tr>'+
        '  <tr class="padtr"><td class="pad">fab Commision:</td> '+
        '<td><input type="number" class="form-control" name="fabCommission"  oninput="regFab(\'fabCommission\')" id="fabCommission" placeholder="0-1,eg"0.15"  value="'+fabCommission+'" ></td></tr>'+
	        
        
        '  <tr class="padtr"><td class="pad">Minimum Fare:</td> '+
        '<td><input type="number" class="form-control" id="minimumFare" name="minimumFare" oninput="reg(\'minimumFare\')"   value="'+minimumFare+'" ></td></tr>'+
        '  <tr class="padtr"><td class="pad">Concierge Fare:</td> '+
        '<td><input type="number" class="form-control" id="extraMoney" name="extraMoney" oninput="reg(\'extraMoney\')"   value="'+extraMoney+'" ></td></tr>'+
	         '  <tr class="padtr"><td class="pad">Status:</td> '+
        '<td><select id="status" name="status" class="form-control"><option value="1">Enabled</option><option value="2">Disabled</option></select></td></tr>'+
        '  <tr class="padtr"><td class="pad">Notes:</td> '+
        '<td><input type="text" class="form-control"  id="remark" name="remark" value="'+remark+'"  ></td></tr>'+
	        '<tr align="center" class="padtr"><td colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
	        ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
	        ' <button type="button" onclick="save()" class="btn btn-info btn1">&nbsp;保&nbsp;存&nbsp;&nbsp;</button>'+
	        '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
	        '<button type="button" onclick="cacel()" class="btn btn-info btn1">&nbsp;&nbsp;取&nbsp;消&nbsp;&nbsp;</button></td></tr></table></form>'
	 			});
			if(row!=undefined&&row.length==1){
	    		$('#status').val(status);
	    		$('#carType').val(carType);
	    	}
}

function regFab(id){
	var text=$('#'+id+'').val();
	 if(parseInt(text)<0||parseInt(text)>1){
		 $('#'+id+'').css("border-color","#FF0000");
		 $('#'+id+'').val('');
		 }else{
			$('#'+id+'').css("border-color","#ccc")
		 }
}
function save(id){
	var data = serialize('adds');//获取表单内容
	if(data.ruleName==""){
		 layer.msg("Rule name cannot be empty ");
		 return;
	}
	if(data.carType==""){
		 layer.msg("Service category cannot be empty ");
		 return;
	    }
	if(data.startPrice==""){
		 layer.msg("Base Fare cannot be empty");
		 return;
	    }
	if(data.timePrice==""){
		 layer.msg("Per Minute cannot be empty");
		 return;
	    }
	if(data.mileagePrice==""){
		 layer.msg("Mileage Fare cannot be empty");
		 return;
	    }
	if(data.bookingFee==""){
		 layer.msg("Booking Fee cannot be empty");
		 return;
	    }
	if(data.bookingFee==""){
			 layer.msg("Minimum Fare  cannot be empty");
			 return;
		 }
	if(data.cancelationFee==""){
		 layer.msg("Cancelation Fee cannot be empty");
		 return;
	 }
	if(data.fabCommission==""){
		 layer.msg("fab Commision cannot be empty");
		 return;
	 }
	if(data.trafficJamPrice==""){
		 layer.msg("Tarrif (CT) cannot be empty");
		 return;
	 }
	console.log(data);
	 $.ajax({
         type: "post",
         url: "carCaculation/addOrUpdate",
         data: JSON.stringify(data),
         contentType:"application/json;charset=UTF-8", 
         dataType:"json",
         success: function(data){    	            	 
        if(data.code==200){
        	 window.location.reload();    
  	       }else{
  	    	    layer.msg(data.msg);
  	       }
                  }
     }); 
	
	
}

function reg(id){
	var text=$('#'+id+'').val();
	 if(parseInt(text)<0){
		 $('#'+id+'').css("border-color","#FF0000");
		 $('#'+id+'').val('');
		 }else{
			$('#'+id+'').css("border-color","#ccc")
		 }
}
function del(){
	var rows=$('#demo-table').bootstrapTable("getSelections");
	if(rows.length==0){
		layer.msg("Please select 1 record for editing");
		return;
	}
	var arr = new Array();
	for(var i in rows){
		arr.push(rows[i].id);	
	}
	var ids = arr.join(",");
	$.ajax({
        type: "get",
        url: "carCaculation/del?ids="+ids,
        success: function(data){    
       	  console.log(data)
      	  if(data.code==200){	
      		layer.msg("Delete Successful");
      		 window.location.reload(); 	
	        	 }else{
	        		  layer.msg(data.msg); 
	        	 }
   }
    });
	
}

    function queryParams(params) {
        var param = {
            pageNo: this.pageNumber,
            pageSize: this.pageSize
        }
        return param;
    }

    function queryParams1() {
        var param = {
            pageNo: 1,
            pageSize: this.pageSize
        }
        return param;
    }
    
</script>
</html>


